<template>
  <ElDrawer
    :title="t('mu-biao-gen-zong')"
    class="select-none"
    :model-value="tracking.visible"
    :modal="false"
    @close="tracking.closeDrawer"
    :size="'20%'"
    :zIndex="-1"
  >
    <template #default>
      <ElCard
        v-for="item in tracking.list"
        :key="item.trackingId"
        class="mb-2 cursor-pointer"
        :class="{
          '!text-[#ff931e]': item.trackingId === tracking.isTrackingId
        }"
        @click="() => tracking.selectTarget(item.trackingId)"
      >
        <div>{{ item.trackingName }}({{ item.trackingId }})</div>
      </ElCard>
    </template>
    <template #footer>
      <ElButton size="large" type="primary" class="w-full" @click="tracking.cancelTracking">
        {{ t('guan-bi-gen-zong') }}
      </ElButton>
    </template>
  </ElDrawer>
</template>

<script setup lang="ts">
import { useTracking } from '@/business/tracking'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const tracking = useTracking()
</script>
